<template>
  <div class="content">
    <el-container>
      <el-aside width="450px" style="background-color: rgb(238, 241, 246)">
        <el-card class="aside-card" style="height:120%">
          <div slot="header" class="clearfix">
            <span>检索活动</span>
          </div>
          <div class="search-condition-view">
            <el-form ref="form" :model="current_search_condition_data" label-width="80px">
              <el-form-item label="时间区间">
                <el-date-picker
                  v-model="current_search_condition_data.date"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="活动标题">
                <el-input v-model="current_search_condition_data.newsTitle"></el-input>
              </el-form-item>
              <el-form-item label="活动概述">
                <el-input v-model="current_search_condition_data.newsContent"></el-input>
              </el-form-item>
              <el-form-item label="发布员">
                <el-input v-model="current_search_condition_data.author"></el-input>
              </el-form-item>
              <el-form-item label="关键字">
                <el-input v-model="current_search_condition_data.keyword"></el-input>
              </el-form-item>
              <el-form-item label="合作方">
                <el-input v-model="current_search_condition_data.partner"></el-input>
              </el-form-item>
              <el-form-item label="活动类型">
                <el-select v-model="current_search_condition_data.categoryId" placeholder="请选择活动类型">
                  <el-option
                    v-for="item in category_data"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门类型">
                <el-select v-model="current_search_condition_data.deptId" placeholder="请选择部门">
                  <el-option
                    v-for="item in department_data"
                    :key="item.id"
                    :label="item.dname"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="星期选择">
                <br />
                <el-checkbox-group v-model="current_search_condition_data.weeks">
                  <el-checkbox label="2">星期一</el-checkbox>
                  <el-checkbox label="3">星期二</el-checkbox>
                  <el-checkbox label="4">星期三</el-checkbox>
                  <el-checkbox label="5">星期四</el-checkbox>
                  <el-checkbox label="6">星期五</el-checkbox>
                  <el-checkbox label="7">星期六</el-checkbox>
                  <el-checkbox label="1">星期日</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search_news">检索</el-button>
                <el-button
                  @click="() => {
                   current_search_condition_data={
        date: [],
        weeks: []
      }

                  }"
                >重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-aside>

      <el-main>
        <el-header height>
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-submenu v-if="is_login" index="user">
              <template slot="title">{{current_user_data.username}}</template>
              <el-menu-item index="2-1" @click="current_user_change_pwd_view_display = true">修改密码</el-menu-item>
              <el-menu-item v-if="current_user_level <=3" index="2-3" @click="toAdmin()">后台</el-menu-item>
              <!-- <el-menu-item v-if="current_user_level == 1" index="2-3" @click="toAdmin()">后台</el-menu-item> -->
              <el-menu-item index="2-2" @click="logout">退出</el-menu-item>
            </el-submenu>
            <el-menu-item v-else index="user">
              <a href="/login">登录</a>
            </el-menu-item>
          </el-menu>
        </el-header>
        <div class="display-type" style="margin: 10px 0px 10px 20px">
          <el-radio-group v-model="display_type" size="medium">
            <el-radio-button label="calendar">日历</el-radio-button>
            <el-radio-button label="table">表格</el-radio-button>
          </el-radio-group>
        </div>
        <div class="main-view" v-loading="main_view_loading">
          <div v-if="display_type == 'calendar'" class="calendar">
            <el-calendar v-model="current_choice_date" v-loading="calendar_data_is_loading">
              <template slot="dateCell" slot-scope="{date, data}">
                <p :class="data.isSelected ?  '' : ''">{{ data.day.split('-').slice(1).join('-') }}</p>
                <!-- news_data -->

                <el-link
                  v-show="get_day_news_length(data.day) != 0"
                  type="success"
                  slot="reference"
                  @click="open_news_info_dialog_view(news_data[data.day])"
                >共有 {{get_day_news_length(data.day)}}个活动</el-link>
              </template>
            </el-calendar>

            <div class="calendar-day-news">
              <el-dialog title="提示" :visible.sync="current_calendar_news_list_display" width="30%">
                <span>这是一段信息</span>
              </el-dialog>
            </div>
          </div>
          <div v-if="display_type == 'table'" class="data-table">
            <div class="data-table-content">
              <el-table :data="news_data_table" height="620px" style="width: 100%">
                <el-table-column type="index" />
                <el-table-column prop="activeDay" label="日期" width="130"></el-table-column>
                <el-table-column prop="activeTime" label="具体时间" width="180"></el-table-column>
                <el-table-column prop="title" label="标题" width="220"></el-table-column>
                <el-table-column prop="author" label="发布人" width="80"></el-table-column>
                <el-table-column prop="clicks" label="点击量" width="80"></el-table-column>
                <!-- <el-table-column prop="categoryid" label="活动类型" width="180">
              <template slot-scope="scope">{{ category_data[scope.row.categoryid].name}}</template>
                </el-table-column>-->
                <el-table-column prop="keyword" label="关键字" width="80"></el-table-column>
                <el-table-column prop="time" label="发布时间" width="130">
                  <template slot-scope="scope">{{rTime(scope.row.time)}}</template>
                </el-table-column>
                <el-table-column prop="startdate" label="活动开始时间" width="130">
                  <template slot-scope="scope">{{rTime(scope.row.startdate)}}</template>
                </el-table-column>
                <el-table-column prop="enddate" label="活动结束时间" width="130">
                  <template slot-scope="scope">{{rTime(scope.row.enddate)}}</template>
                </el-table-column>
                <el-table-column prop="partner" label="合作方" width="80"></el-table-column>
                <el-table-column label="操作" fixed="right" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="open_news_info_dialog_view([scope.row])">预览</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="footer" style="margin-top:10px;">
              <el-row :gutter="20">
                <el-col :span="2" :offset="0">
                  <el-tag effect="plain">总数:{{ news_data_table_all.length }}</el-tag>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-pagination
                    background
                    :current-page="1"
                    layout="prev, pager, next"
                    @current-change="news_data_table_page_change"
                    :total="news_data_table_all.length"
                  ></el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="news_info_dialog_view">
          <el-dialog
            title="活动信息"
            :visible.sync="news_info_dialog_view_display"
            top="5vh"
            width="80%"
          >
            <el-tabs
              v-model="news_info_dialog_view_collapse"
              tab-position="left"
              @tab-click="handler_news_info_dialog_view_collapse_change"
            >
              <el-tab-pane
                v-for="news in current_news_data"
                :key="news.id"
                :label="news.title"
                :name="news.id + ''"
              >
                <el-row :gutter="20">
                  <el-col :span="11" :offset="0">
                    <el-form label-width="80px">
                      <el-form-item label="活动名称">{{news.title}}</el-form-item>
                      <el-form-item label="发布人">{{news.author}}</el-form-item>
                      <el-form-item label="点击量">{{news.clicks}}</el-form-item>
                      <el-form-item label="发布时间">{{rTime(news.time)}}</el-form-item>
                      <el-form-item label="活动时间">
                        <el-tag type="success">{{parseWeekData(news.activeday).text}}</el-tag>
                        <el-tag
                          v-for="week in parseWeekData(news.activeday).week"
                          :key="week"
                          effect="plain"
                        >{{getWeekByNum(week)}}</el-tag>
                        <br />
                        开始时间: {{rTime(news.startdate)}}
                        <br />
                        结束时间: {{rTime(news.enddate)}}
                      </el-form-item>
                      <el-form-item label="基本性质">
                        <el-tag type="warning">合作方: {{ news.partner }}</el-tag>
                        <el-tag type="warning">关键字: {{ news.keyword }}</el-tag>
                      </el-form-item>
                      <el-form-item label="基本概述">{{ news.content }}</el-form-item>
                    </el-form>
                    <div class="comments">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span style="line-height: 46px;font-size: 1.15rem;">评论</span>
                          <div class="opertion" style="float: right; padding: 3px 0">
                            <el-input
                              placeholder="请输入评论"
                              v-model="current_news_comments_text"
                              class="input-with-select"
                              :disabled="!is_login"
                            >
                              <el-button
                                :disabled="!is_login"
                                slot="append"
                                @click="insert_news_comments(news.id)"
                              >发表</el-button>
                            </el-input>
                          </div>
                        </div>
                        <div
                          class="comments-list"
                          v-loading="current_news_comments_refresh_loading"
                          style="height: 200px;overflow-y: auto;"
                        >
                          <el-timeline :reverse="true" v-show="current_news_comments_refresh">
                            <el-timeline-item
                              v-for="item in current_news_comments_data[news.id]"
                              :key="item.id"
                              :timestamp="item.commentator + '    '+rTime(item.commdate)"
                              placement="top"
                            >
                              <div class="text">{{item.content}}</div>
                            </el-timeline-item>
                          </el-timeline>
                        </div>
                      </el-card>
                    </div>
                  </el-col>
                  <!-- 在这里设置图片 -->
                  <el-col :span="12" :offset="0">
                    <div class="exhibition">
                      <!-- <el-carousel arrow="always" height="350px" :autoplay="false"> -->
                      <el-carousel arrow="always" height="1000px" :autoplay="false">
                        <el-carousel-item
                          v-for="item in current_news_resource[news.id]"
                          :key="item.id"
                        >
                          <!-- <img
                            v-if="item.type == 'i'"
                            :src="'/api/upload/addparent/' + item.id"
                            style="height:100%;width:100%"
                          /> -->

                            <el-image v-if="item.type == 'i'"
                                    :src="'/api/upload/addparent/' + item.id"
                                    style="height:100%;width:100%"
                            ></el-image>

                          <video
                            v-else
                            :src="'/api/upload/addparent/' + item.id"
                            controls="controls"
                            style="height:100%;width:100%"
                          ></video>
                        </el-carousel-item>
                      </el-carousel>
                    </div>
                    <!-- <div class="comments">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span style="line-height: 46px;font-size: 1.15rem;">评论</span>
                          <div class="opertion" style="float: right; padding: 3px 0">
                            <el-input
                              placeholder="请输入评论"
                              v-model="current_news_comments_text"
                              class="input-with-select"
                              :disabled="!is_login"
                            >
                              <el-button
                                :disabled="!is_login"
                                slot="append"
                                @click="insert_news_comments(news.id)"
                              >发表</el-button>
                            </el-input>
                          </div>
                        </div>
                        <div
                          class="comments-list"
                          v-loading="current_news_comments_refresh_loading"
                          style="height: 200px;overflow-y: auto;"
                        >
                          <el-timeline :reverse="true" v-show="current_news_comments_refresh">
                            <el-timeline-item
                              v-for="item in current_news_comments_data[news.id]"
                              :key="item.id"
                              :timestamp="item.commentator + '    '+rTime(item.commdate)"
                              placement="top"
                            >
                              <div class="text">{{item.content}}</div>
                            </el-timeline-item>
                          </el-timeline>
                        </div>
                      </el-card>
                    </div> -->
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-dialog>
        </div>

        <div class="current_user_change_pwd_view">
          <el-dialog title="修改密码" :visible.sync="current_user_change_pwd_view_display">
            <updatePwdView />
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { categorySelectAll, newsClicks, newsSearchCondition, newsSelectByMonthDate, commentsInsert, commentsSelectByNewsId, uploadSelectByNewsId, departmentSelectAll } from '@/api/requests/base'
import { rTime, getWeekByNum, parseWeekData } from '@/utils/time'
import updatePwdView from '@/views/pages/personalSetting/personal-UpdatePwd'
import { getUserLevel } from '@/utils/user'

export default {
  components: {
    updatePwdView
  },

  data () {
    return {
      rTime, getWeekByNum, parseWeekData,
      is_login: false,
      main_view_loading: false,
      display_type: 'table',
      current_user_data: {},
      current_user_level: getUserLevel(),
      news_data: { '2021-05-01': [] },
      category_data: [],
      news_data_table: [],
      news_data_table_all: [],
      search_news_data: [],
      search_news_list_collapse: [''],
      news_info_dialog_view_collapse: '1',

      department_data: [],
      department_data_list: {},
      current_search_condition_data: {
        date: [],
        weeks: []
      },
      calendar_data_is_loading: false,
      current_calendar_choice_dept: 1,
      current_calendar_news_list_display: false,
      current_news_data: {},
      current_news_comments_data: {},
      current_news_comments_text: '',
      current_news_resource: {},
      current_news_comments_refresh: true,
      current_news_comments_refresh_loading: false,
      news_info_dialog_view_display: false,
      current_choice_date: new Date(),
      current_user_change_pwd_view_display: false
    }
  },
  created () {
    const userDataCache = localStorage.getItem('userDataCache')
    if (userDataCache != null) {
      this.is_login = true
      this.current_user_data = JSON.parse(userDataCache)
      // this.current_calendar_choice_dept = this.current_user_data.departmentid
    }


  },
  mounted () {
    // this.get_news_data()
    this.get_category_data_all()
    this.get_department_data()
    let temp_data = new Date()
    this.current_search_condition_data.date.push(temp_data.toUTCString())
    temp_data.setDate(temp_data.getDate() + 1)
    this.current_search_condition_data.date.push(temp_data.toUTCString())
    this.search_news()
  },
  methods: {
    toAdmin () {
      this.$router.push("/admin")
    },
    click_date () {
      this.current_calendar_news_list_display = true

      return ''
    },
    get_news_data () {
      this.calendar_data_is_loading = true
      let date_temp = this.current_choice_date.toLocaleDateString()
      date_temp = date_temp.replace('/', '-')
      date_temp = date_temp.replace('/', '-')
      date_temp = date_temp.replace('/', '-')
      newsSelectByMonthDate(this.current_calendar_choice_dept, date_temp).then(res => {
        this.news_data = res.data

        this.calendar_data_is_loading = false
      })
    },
    search_news () {
      this.main_view_loading = true
      let date = this.current_search_condition_data.date
      this.current_search_condition_data.startDate = date[0]
      this.current_search_condition_data.endDate = date[1]
      newsSearchCondition(this.current_search_condition_data).then(res => {
        this.search_news_data = []
        this.news_data_table = []
        this.news_data_table_all = []
        const temp_data = res.data
        this.news_data = res.data
        const temp_keys = []
        for (const i in temp_data) {
          temp_keys.push(i)
        }
        temp_keys.sort((x, y) => {
          const s1 = x.split('-')
          const s2 = y.split('-')
          const date1 = new Date(s1[0], s1[1], s1[2])
          const date2 = new Date(s2[0], s2[1], s2[2])
          if (date1 < date2) {
            return -1
          } else {
            return 1
          }

        })
        temp_keys.forEach(key => {
          temp_data[key].forEach(news => {
            news.activeDay = key
            news.activeTime = JSON.parse(news.activeday).text
            this.news_data_table_all.push(news)

          })
        })

        this.news_data_table_page_change(0)
        this.main_view_loading = false



      })
    },
    get_day_news_length (day) {
      const data = this.news_data[day]
      if (data == null) {
        return 0
      }
      return data.length


    },
    get_category_data_all () {
      categorySelectAll().then(res => {
        this.category_data = res.data

      })
    },
    open_news_info_dialog_view (data) {
      this.current_news_data = data
      this.news_info_dialog_view_collapse = data[0].id + ''
      this.get_news_comments()
      this.get_news_resource()
      this.news_info_dialog_view_display = true

    },
    insert_news_comments (id) {
      //todo 从本地提取用户名
      const data = {
        newsid: id,
        content: this.current_news_comments_text,
        commentator: this.current_user_data.username,

      }
      commentsInsert(data).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });
        this.current_news_comments_text = ''
        this.get_news_comments()



      })
    },
    get_news_comments () {
      this.current_news_data.forEach(item => {
        commentsSelectByNewsId(item.id).then(res => {
          newsClicks(item.id)
          this.current_news_comments_data[item.id + ''] = res.data
          this.current_news_comments_refresh = false
          this.current_news_comments_refresh_loading = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.current_news_comments_refresh = true
              this.current_news_comments_refresh_loading = false
            })
          }, 1000);
        })
      })



    },
    get_news_resource () {
      this.current_news_data.forEach(item => {
        uploadSelectByNewsId(item.id).then(res => {
          this.current_news_resource[item.id + ''] = res.data
          this.current_news_comments_refresh = false
          this.current_news_comments_refresh_loading = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.current_news_comments_refresh = true
              this.current_news_comments_refresh_loading = false
            })
          }, 1000);
        })
      })

    },
    get_department_data () {
      departmentSelectAll().then(res => {
        this.department_data = res.data
        this.department_data.forEach(item => {
          this.department_data_list[item.id] = item.dname
        })
      })
    },
    // handler_current_calendar_choice_dept_change (i) {
    //   this.get_news_data()
    // },
    handler_news_info_dialog_view_collapse_change () {
      this.current_news_comments_text = ''
    },
    news_data_table_page_change (num) {
      this.news_data_table = []
      let pageNum = ((num || 1) - 1) * 10
      let tempData = JSON.parse(JSON.stringify(this.news_data_table_all))
      console.log(pageNum + '|' + parseInt(pageNum + 10));
      this.news_data_table = tempData.slice(pageNum, pageNum + 10)



    },
    logout () {
      localStorage.removeItem('userDataCache')
      window.location.href = '/login'
    }

  },

}
</script>


<style lang="scss" scoped>
aside {
  padding: 0px;
}
.news-list {
  height: 37vh;
  padding: 10px;
  overflow-y: auto;
}
.el-date-editor {
  width: 328px;
}
.aside-card {
  height: 95vh;
}

.content {
  padding: 20px;
}
.el-calendar-day {
  height: auto;
}

.news_info_dialog_view {
  .el-tag {
    margin-right: 5px;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.exhibition {
  margin-bottom: 20px;
}
.comments {
  margin-top: 15%;
  .el-card {
    height: 400px;
    .el-card__body {
    }
  }
  .text {
    padding: 10px 15px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
}

.el-calendar-table {
  width: 100%;
  height: 100%;
  &:not(.is-range) {
    //使不是本月的日期不可点击，不会跳转到其他月份
    td.next {
      pointer-events: none;
    }
    td.prev {
      pointer-events: none;
    }
    //td{
    //    pointer-events: none;
    //}
  }
}
</style>
